<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        div {
            width: 300px;
            /* height: 300px; */
            background-color: #f00;
            display: none;
        }
    </style>
</head>

<body>

    <button>1</button>

    <div>
        <p>22</p>
        <p>333333</p>
        <p>3333333333333</p>
    </div>
    <!-- 33333 -->

    <script>


        // 元素  display:none   之后   样式都获取不到




        // 获取元素

        function GetEle(ele) {
            this.eles = document.querySelectorAll(ele);

        }


        // 返回一个实例化对象
        function $(ele) {
            return new GetEle(ele);
        }


        GetEle.prototype.slideUp = function () {
            for (let i = 0; i < this.eles.length; i++) {
                let height = this.eles[i].offsetHeight;
                let timer = setInterval(() => {
                    height -= 10;
                    this.eles[i].style.height = height + 'px';
                    if (height <= 0) {
                        clearInterval(timer);
                        height = 0;
                        this.eles[i].style.height = height + 'px';
                    }
                }, 10)
            }
        }


        GetEle.prototype.slideDown = function () {
            for (let i = 0; i < this.eles.length; i++) {
                this.eles[i].style.display = 'block';
                const height = this.eles[i].offsetHeight;
                this.eles[i].style.height = '0';
                this.eles[i].style.overflow = 'hidden';


                let start = 0 ;
                let timer = setInterval(() => {
                    start += 10;
                    this.eles[i].style.height = start + 'px';
                    if (start >= height) {
                        clearInterval(timer);
                        start = height;
                        this.eles[i].style.height = start + 'px';
                    }
                }, 10)
            }
        }





        document.onclick = function () {
            $('div').slideDown()
        }


    </script>

</body>

</html>